<template>
    <div id="view_config" class="home-page-contianer">
        <n-tabs
            class="home-page-tabs"
            animated
            type="line"
            @before-leave="compControl.tab_control.handleSwitchTab"
            @update:value="compControl.tab_control.handleUpdateValue">
            <n-tab-pane
                name="vsftpd.conf"
                tab="vsftpd.conf"
                :disabled="compControl.tab_control.isDisabed('vsftpd.conf')">
                <v_vsftpd ref="REF_v_vsftpd" />
            </n-tab-pane>
            <n-tab-pane
                name="smb.conf"
                tab="smb.conf"
                :disabled="compControl.tab_control.isDisabed('smb.conf')">
                <v_samba ref="REF_v_samba" />
            </n-tab-pane>
            <!--   <n-tab-pane name="123" tab="123">123</n-tab-pane>
            <n-tab-pane name="456" tab="456">456</n-tab-pane>-->
            <template #suffix>
                <n-space>
                    <n-button
                        v-if="!compControl.edit_control.edit_mode"
                        size="tiny"
                        type="info"
                        secondary
                        @click="compControl.edit_control.handleEdit()">
                        <n-icon :size="16" style="margin-top: -1px">
                            <EditNoteRound />
                        </n-icon>
                        <span class="d-phone-none">编辑文件</span>
                    </n-button>
                    <n-button
                        v-if="!compControl.edit_control.edit_mode"
                        size="tiny"
                        type="error"
                        secondary
                        @click="compControl.edit_control.handleResetConfig()">
                        <n-icon :size="16" style="margin-top: -1px">
                            <AutorenewFilled />
                        </n-icon>
                        <span class="d-phone-none">还原配置文件</span>
                    </n-button>
                </n-space>
                <n-space v-if="compControl.edit_control.edit_mode">
                    <n-button size="tiny" @click="compControl.edit_control.handleCancelEdit(false)">
                        <n-icon>
                            <DeleteSweepOutlined />
                        </n-icon>
                        取消编辑
                    </n-button>
                    <n-button
                        size="tiny"
                        type="primary"
                        @click="compControl.edit_control.handleCancelEdit(true)">
                        <n-icon>
                            <SaveAsOutlined />
                        </n-icon>
                        保存文件
                    </n-button>
                </n-space>
            </template>
        </n-tabs>
    </div>
</template>

<script setup lang="ts">
import { computed, reactive, ref } from 'vue'
import v_vsftpd from './v_vsftpd.vue'
import v_samba from './v_samba.vue'
import { useRoute } from 'vue-router'
import { useDialog, useMessage } from 'naive-ui'
import { EditNoteRound, SaveAsOutlined, DeleteSweepOutlined, AutorenewFilled } from '@vicons/material'

import { axd_resetConfigFile } from './conf-interface'

const dialog = useDialog()

const REF_v_vsftpd = ref<InstanceType<typeof v_vsftpd>>()
const REF_v_samba = ref<InstanceType<typeof v_samba>>()
const compControl = reactive({
    edit_control: {
        edit_mode: false,
        computed_edited: false,
        handleEdit() {
            if (compControl.tab_control.activeName === 'vsftpd.conf') {
                if (REF_v_vsftpd.value) {
                    REF_v_vsftpd.value.startEdit()
                    compControl.edit_control.edit_mode = true
                }
            } else if (compControl.tab_control.activeName === 'smb.conf') {
                if (REF_v_samba.value) {
                    REF_v_samba.value.startEdit()
                    compControl.edit_control.edit_mode = true
                }
            }
        },
        async handleCancelEdit(save: boolean = false) {
            if (compControl.tab_control.activeName === 'vsftpd.conf') {
                if (REF_v_vsftpd.value) {
                    const fb: boolean = await REF_v_vsftpd.value.endEdit(save)
                    compControl.edit_control.edit_mode = !fb
                }
            } else if (compControl.tab_control.activeName === 'smb.conf') {
                if (REF_v_samba.value) {
                    const fb: boolean = await REF_v_samba.value.endEdit(save)
                    compControl.edit_control.edit_mode = !fb
                }
            }
        },
        handleResetConfig() {
            dialog.warning({
                title: '警告',
                content: '是否确认还原配置文件？',
                positiveText: '确定',
                negativeText: '取消',
                onPositiveClick: () => {
                    axd_resetConfigFile(compControl.tab_control.activeName).then(() => {
                        if (compControl.tab_control.activeName === 'vsftpd.conf') {
                            REF_v_vsftpd.value?.refreshData()
                        } else if (compControl.tab_control.activeName === 'smb.conf') {
                            REF_v_samba.value?.refreshData()
                        }
                    })
                },
                onNegativeClick: () => {}
            })
        }
    },
    tab_control: {
        activeName: 'vsftpd.conf',
        isDisabed: computed(() => {
            return (name: string) => {
                if (compControl.edit_control.edit_mode) {
                    if (name != compControl.tab_control.activeName) return true
                } else {
                    return false
                }
            }
        }),
        handleSwitchTab(new_tab_name: string = '') {
            compControl.edit_control.handleCancelEdit(false)
            compControl.tab_control.activeName = new_tab_name
            return true
        },
        handleUpdateValue() {}
    }
})
</script>

<style lang="scss" scoped>
@use '@/components/framework/framework';

:deep(.tab-scroller) {
    $height: calc(framework.$framework_content_height - 42px - 1em);
    max-height: $height;
}
:deep(.n-tab-pane) {
    padding: 0.25rem 0 !important;
    //height: 300px;
}
:deep(.n-code__line-numbers) {
    background-color: #00a0000a;
    padding-right: 0.5rem;
}
:deep(.__code__) {
    border-radius: 0.375rem;
    width: 100%;
    padding: 0 0.5rem;
    background-color: #00000007;
}
</style>
